<!--
 * @Description: 类型筛选组件
 * @Author: wangqian
 * @LastEditors: wangqian
 * @Date: 2021-06-22 16:19:24
 * @LastEditTime: 2021-06-22 21:25:45
-->
<template>
  <a-card class="supper-card">
    <div class="supper-card-header">
      <ul class="my-radio-group">
        <li
          class="my-radio-item"
          v-for="(tab, index) in tabs"
          @click="radioClickHandle(tab, index)"
          :class="[`my-radio-item_${tab.type}`, { checked: tab.active }]"
        >
          <span>
            <img :src="iconMap[tab.type]" />
            {{ tab.name }}
          </span>
        </li>
      </ul>
      <div>
        <slot name="query"></slot>
      </div>
    </div>
    <!-- 分类树 -->
    <select-item
      v-for="tab in tabs"
      :key="tab.type"
      :visible="tab.active"
      :options="tab"
      @checked-change="typeCardChange"
      :ref="
        el => {
          selectCardRef[tab.type] = el;
        }
      "
    ></select-item>

    <!-- 筛选结果 -->
    <a-card v-if="currentCheckedTags.length" class="select-checked" :bordered="false">
      <m-tag
        closable
        v-for="(tag, index) in currentCheckedTags"
        :key="tag.code"
        :type="tag.attributes.type"
        @close="tagClose(tag, index)"
      >
        {{ tag.name }}
      </m-tag>
      <a @click="removeAllChecked">
        <delete-outlined />
        清空
      </a>
    </a-card>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, nextTick, reactive, PropType } from 'vue';
import SelectItem from '@/components/supper-select/select-item/index.vue';
import MTag from '@/components/m-tag/index.vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { useStore } from 'vuex';
import { cloneDeep } from 'lodash';
import {
  addExtraAttribute,
  refreshAllSonNodes,
  refreshAllParentNodes,
} from '@/components/supper-select/select-item/index';
import { getNodeById, depthEach } from '@/utils/tree';
import { TreeProps } from '@/typing';
import aiImg from '@/assets/image/tags/ai.svg';
import jqImg from '@/assets/image/tags/jq.svg';
import fkImg from '@/assets/image/tags/fk.svg';
import xqdw from '@/assets/image/tags/xqdw.svg';
const iconMap = {
  ai: aiImg,
  jq: jqImg,
  fk: fkImg,
  xqdw: xqdw,
};
export type DataProps = {
  code: string;
  id?: string;
  leaf: boolean;
  level: number;
  name: string;
  parentCode: string;
  attributes?: any;
  children?: DataProps[] | any;
  collapse?: boolean;
  checked?: boolean;
  indeterminate?: boolean;
};

type SelectCardRefType = {
  [key: string]: any;
};
interface OptinosType {
  visible?: boolean;
  disabled?: boolean;
  active?: boolean;
  type: 'ai' | 'jq' | 'fk' | 'xqdw';
  name?: string;
  checkedKeys: Array<string>;
  data?: DataProps | any;
}
const defalutOptions: Array<OptinosType> = [
  {
    visible: true,
    disabled: false,
    active: false,
    type: 'ai',
    name: '智能分类',
    checkedKeys: [],
  },
  {
    visible: true,
    disabled: false,
    active: false,
    type: 'jq',
    name: '接警类别',
    checkedKeys: [],
  },
  {
    visible: true,
    disabled: false,
    active: false,
    type: 'fk',
    name: '反馈类别',
    checkedKeys: [],
  },
  {
    visible: true,
    disabled: false,
    active: false,
    type: 'xqdw',
    name: '辖区单位',
    checkedKeys: [],
  },
];
export default defineComponent({
  props: {
    options: {
      request: false,
      type: Array as PropType<Array<OptinosType>>,
      default: () => {
        return [];
      },
    },
  },
  emits: ['change'],
  setup(props, { emit }) {
    const store = useStore();
    const currentCheckedTags = ref<Array<TreeProps>>([]);
    const selectCardRef = ref<SelectCardRefType>({});
    const tabs = ref<Array<OptinosType>>(
      defalutOptions
        .map(item => {
          return {
            ...Object.assign(
              {},
              item,
              props.options.find(o => item.type === o.type),
            ),
            data: {},
          };
        })
        .filter(o => o.visible),
    );

    // tab 切换
    const radioClickHandle = (tab: OptinosType): void => {
      tabs.value.forEach(item => (item.active = item.type === tab.type ? !item.active : false));
    };

    // 获取当前选中的tag
    const getCheckedTags = (): Array<any> => {
      const data = { value: [] };
      Object.values(selectCardRef.value).forEach((el: any) => {
        const currentCheckedNodes = el.getCurrentCheckedNodes();
        data.value = data.value.concat(currentCheckedNodes);
      });
      return data.value;
    };

    // 分类change事件
    const typeCardChange = () => {
      currentCheckedTags.value = getCheckedTags();
      emit('change', currentCheckedTags.value);
    };

    // 移除标签 取消选中
    const tagClose = (node: TreeProps): void => {
      const type: string = node?.attributes?.type || '';
      const currentSelectRef = selectCardRef.value[type];
      currentSelectRef.removeChecked(node);
      currentCheckedTags.value = getCheckedTags();
      emit('change', currentCheckedTags.value);
    };

    // 初始化赋值
    const initData = (): void => {
      const classifyTree = cloneDeep(store.getters['dictionary/classifyTree']);
      const callTree = cloneDeep(store.getters['dictionary/callTree']);
      const dealTree = cloneDeep(store.getters['dictionary/dealTree']);
      const xqdwTree = cloneDeep(store.getters['dictionary/xqdwTree']);
      const dataMap = {
        ai: classifyTree,
        jq: callTree,
        fk: dealTree,
        xqdw: xqdwTree,
      };

      tabs.value.forEach(item => {
        addExtraAttribute(dataMap[item.type], item.type);
        item.data = reactive({
          attributes: {
            dataShowFlag: 1,
            controlFlag: 0,
            trustFlag: 1,
            displayOrder: 2,
            nrFlag: 1,
            checked: false,
            indeterminate: false,
            collapse: false,
            type: item.type,
          },
          children: dataMap[item.type],
          code: '0',
          id: 'null',
          leaf: false,
          level: 0,
          name: item.name,
          parentCode: 'root',
        });

        depthEach([item.data], o => {
          if (item.checkedKeys.includes(o.code)) {
            const parentNode = getNodeById('code', o.parentCode, [item.data]);
            o.attributes.checked = true;
            o.attributes.collapse = false;
            refreshAllParentNodes(parentNode, [item.data]);
            refreshAllSonNodes(o, o.attributes.checked);
          }
        });

        nextTick(() => {
          currentCheckedTags.value = getCheckedTags();
        });
      });
    };

    // 清空筛选条件
    const removeAllChecked = (): void => {
      Object.values(selectCardRef.value).forEach((el: any) => {
        el.removeChecked();
      });
      currentCheckedTags.value = [];
      emit('change', currentCheckedTags.value);
    };

    onMounted(() => {
      store.dispatch(`dictionary/GET_TREE_PARAM`).then(() => {
        initData();
      });
    });
    return {
      typeCardChange,
      currentCheckedTags,
      tagClose,
      selectCardRef,
      removeAllChecked,
      iconMap,
      tabs,
      radioClickHandle,
    };
  },
  components: {
    SelectItem,
    MTag,
    DeleteOutlined,
  },
});
</script>
<style scoped lang="less">
@ai-color: #e99220; //AI
@jq-color: #1ccaff; //接警
@fk-color: #3191ff; //反馈
@xqdw-color: #b276ff; //辖区

.supper-card {
  margin-top: 8px;
  .supper-card-header {
    display: flex;
    align-items: center;
    div {
      margin-left: 30px;
    }
  }
  .my-radio-group {
    display: flex;
    margin: 0;
    padding: 0;
    .my-radio-item {
      position: relative;
      width: 121px;
      height: 42px;
      color: #b9c4dd;
      font-weight: 400;
      font-size: 16px;
      font-family: Source Han Sans CN;
      line-height: 42px;
      text-align: center;
      list-style: none;
      background: #2b2d33;
      border-right: 1px solid #57617b;
      cursor: pointer;
      user-select: none;
      &.checked {
        background: #3c414b;
      }
      &::before {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 0px;
        height: 0px;
        border-color: #b9c4dd transparent;
        border-style: solid;
        border-width: 0 0 12px 12px;
        content: '';
      }
      &.checked.my-radio-item_ai {
        color: @ai-color;
        &::before {
          border-color: @ai-color transparent;
        }
      }
      &.checked.my-radio-item_jq {
        color: @jq-color;
        &::before {
          border-color: @jq-color transparent;
        }
      }
      &.checked.my-radio-item_fk {
        color: @fk-color;
        &::before {
          border-color: @fk-color transparent;
        }
      }
      &.checked.my-radio-item_xqdw {
        color: @xqdw-color;
        &::before {
          border-color: @xqdw-color transparent;
        }
      }
    }
    img {
      width: 16px;
      height: 16px;
    }
  }
  .select-checked {
    position: relative;
    background: #202126;
    :deep(.ant-card-body) {
      border-top: 1px solid #57617b;
    }
    .m-tag {
      margin-right: 8px;
      margin-bottom: 4px;
    }
    .anticon-delete {
      margin-left: 20px;
      font-size: 15px;
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
    }
  }
}
.supper-card > :deep(.ant-card-body) {
  padding: 0;
}
</style>
